<template>
  <div class="basic">
    <a-card>
      <div class="flex flex-a-c flex-j-s-b">
        <div class="basic-title colorin">设备基本数据</div>
        <!-- <a-date-picker size="small" format="YYYY-MM-DD" v-model="timeParams.day" @change="dateChange" /> -->
      </div>
      <br />
      <a-row :gutter="24">
        <a-col :xl="10" :xxl="10">
          <pieCharts :chartData="pieDataCharts" :pieDataInner="pieDataInner" :running="running" :height="'314px'"></pieCharts>
        </a-col>
        <a-col :xl="14" :xxl="14">
          <a-row>
            <a-col :xl="12" :xxl="12">
              <div class="pieSend " v-for="(item, index) in pieData" :key="index + 'a'">
                <span class="quan" :style="{ 'border-color': item.color }"></span>
                <span class="name colorin">{{ item.name }}</span>
                <span class="value colorin">{{ item.value }}</span>
              </div>
            </a-col>
            <a-col :xl="12" :xxl="12">
              <ul>
                <li class="pieSend">
                  <span class="name colorin">今日加工：</span>
                  <span class="value colorin">{{ model ? (model.total ? model.total : 0) : 0 }}件</span>
                </li>
                <!-- <li class="pieSend flex  flex-j-s-a">
                  <div class="name colorin">工件信息</div>
                  <div>
                    <div class="value colorin" v-for="(item, index) in produceNameRank" :key="index + 'b'">
                      {{ index + 1 }}. {{ item.produceName }} {{ item.count }}件
                    </div>
                    <a @click="gotoyieldDetails" style="color:#269AF3">查看详情></a>
                    <div v-if="show" class=" more flex flex-a-c flex-j-s-b">
                      <div>...</div>
                      <div style="color:#40a9ff" @click="handleMore">更多</div>
                    </div>
                  </div>
                </li> -->
              </ul>
            </a-col>
          </a-row>
        </a-col>
      </a-row>
    </a-card>
  </div>
</template>

<script>
import api from '@api/deviceInfo';
import moment from 'moment';
import { timeCalculation } from '@/unit/tool';
import pieCharts from './pieCharts';
export default {
  name: 'BasicData',
  components: { pieCharts },
  data() {
    return {
      moment,
      timeParams: { macSN: '', day: '' },
      dateFormat: 'YYYY-MM-DD',
      model: {},
      running: null,
      pieDataCharts: [],
      pieDataInner: [],
      produceNameRank: [],
      show: false,
      pieData: [
        { value: '0', name: '开机', color: '#289EF6' },
        { value: '0', name: '运行', color: '#3FC529' },
        { value: '0', name: '待机', color: '#FBC225' },
        { value: '0', name: '报警', color: '#E74629' },
        { value: '0', name: '离线', color: '#B9C6BA' },
      ],
    };
  },
  mounted() {
    this.timeParams.macSN = this.macSN = this.$route.query.macsn;
    this.timeParams.day = timeCalculation(new Date(), 'subtract', 0);
    this.getStateTimeSum();
  },
  methods: {
    // 获取设备基本数据
    async getStateTimeSum() {
      const res = await api.getStateTimeSum(this.timeParams);
      if (res.msgCode !== 0) {
        this.$message.error('获取用户信息失败');
        return;
      }
      let { data } = res;
      let { isRegister, running, stateTimes, alarmStateTimes } = data;
      this.model = data;
      if (parseInt(isRegister) == 1) {
        this.pieData = [
          { value: this.model ? this.model.startUp : 0, name: '开机', color: '#289EF6' },
          { value: this.model ? this.model.running : 0, name: '运行', color: '#3FC529' },
          { value: this.model ? this.model.stop : 0, name: '待机', color: '#FBC225' },
          { value: this.model ? this.model.offline : 0, name: '离线', color: '#B9C6BA' },
        ];
      } else {
        this.pieData = [
          { value: this.model ? this.model.startUp : 0, name: '开机', color: '#289EF6' },
          { value: this.model ? this.model.running : 0, name: '运行', color: '#3FC529' },
          { value: this.model ? this.model.stop : 0, name: '待机', color: '#FBC225' },
          { value: this.model ? this.model.alarm : 0, name: '报警', color: '#E74629' },
          { value: this.model ? this.model.offline : 0, name: '离线', color: '#B9C6BA' },
        ];
      }
      this.running = running ? running : 0;
      this.pieDataCharts = stateTimes ? stateTimes : [];
      this.pieDataInner = alarmStateTimes ? alarmStateTimes.stateTimes : [];
      if (data && data.produceNameRank) {
        this.produceNameRank = data.produceNameRank;
        if (data.produceNameRank.length > 3) {
          this.show = true;
        }
      } else {
        this.produceNameRank = [];
        this.show = false;
      }
    },
    // 日取选择器回调
    dateChange(data, datastring) {
      this.timeParams.day = datastring;
      this.getStateTimeSum();
    },
    handleMore() {
      this.$router.push({
        path: '/yieldDetails',
        query: {
          macsn: this.macSN,
          groupid: this.$route.query.groupid,
        },
      });
    },
    isRegisterHandle(val) {
      return parseInt(val) == 1;
    },
  },
};
</script>

<style scoped lang="less">
.basic {
  .basic-title {
    font-weight: bold;
  }
  .pieSend {
    min-height: 60px;
    // overflow: hidden;
    position: relative;
    .quan {
      display: inline-block;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      border: 2px solid #fff;
      margin-right: 10px;
    }
    .name {
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #000;
      line-height: 24px;
      margin-right: 20px;
      font-weight: 600;
    }

    .setBox {
      margin-left: 20px;
    }
    .value {
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #1d2531;
      line-height: 32px;
    }
    p {
      float: left;
      span {
        display: block;
      }
    }
  }
  .more {
  }
}
</style>
